<template>
    <div style="width: 80%;margin-left:500px">
        <el-form ref="service" :model="service" label-width="100px">
            <el-form-item label="服务名称"
                prop="serviceName"
                :rules="[
                    { required: true, message: '不能为空'},
                ]">
                <el-input v-model="service.serviceName" type="serviceName" autocomplete="off"  style="width:300px">请输入服务名称</el-input>
            </el-form-item>
            <el-form-item label="使用规格"
                prop="serviceWeight"
                :rules="[
                    { required: true, message: '不能为空'},
                ]">
                <el-input v-model="service.serviceWeight" type="serviceWeight" autocomplete="off"   style="width:300px">请输入使用规格</el-input>
            </el-form-item>
            <el-form-item label="耗时"
                prop="serviceUsetime"
                :rules="[
                    { required: true, message: '不能为空'},
                ]">
                <el-input v-model="service.serviceUsetime" type="serviceUsetime" autocomplete="off"  style="width:300px">耗时</el-input>
            </el-form-item>
            <!-- <div class="block">
                <el-form-item label="可预约时间">
                    <el-date-picker
                    v-model="service.serviceTime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </div> -->
            <el-form-item label="可预约时间"
                prop="serviceTime"
                :rules="[
                    { required: true, message: '可预约时间不能为空'},
                ]">
                <el-input v-model="service.serviceTime" type="serviceTime" autocomplete="off" style="width:300px">可预约时间</el-input>
            </el-form-item>

            <el-form-item label="服务类别"
                prop="serviceFix"
                :rules="[
                    { required: true, message: '服务类别不能为空'},
                ]">
                <el-input v-model="service.serviceFix" type="serviceFix" autocomplete="off" style="width:300px">请输入服务类别</el-input>
            </el-form-item>
            <el-form-item label="服务员等级">
                <el-select v-model="value" placeholder="请选择">
                <el-option
                v-for="staff in staffs"
                :key="staff.staff.staffId.value"
                :label="staff.staff.staffLevel"
                :value="staff.staff.staffId">
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="价格"
                prop="servicePrice"
                :rules="[
                    { required: true, message: '价格不能为空'},
                    { type: 'number', message: '价格必须为数字值'}
                ]">
                <el-input type="servicePrice" v-model.number="service.servicePrice" autocomplete="off" style="width:300px"></el-input>
                <!-- <el-input v-model="service.servicePrice" style="width:300px">价格</el-input> -->
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(service)">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item> 
        </el-form>
    </div>
  
</template>

<script>

import {addService,getStaffs} from '@/services/ServiceService.js'

export default {
    data(){
        return{            
            staffs:[],
            value:'',
            service:{
                serviceName:"",
                serviceWeight:"",
                serviceUsetime:"",
                serviceTime:"",
                staffId:"",
                // value:'',
                serviceFix:"",
                servicePrice:"",               
            },
        }
    },
    async created(){
      console.log("staffs")
      this.staffs = await getStaffs();
   
      console.log(this.staffs)
    },
    methods:{
        async onSubmit(){
            console.log("----------------------")
            console.log(this.service.staffId)
            console.log(this.value)
            this.service.staffId = this.value
            var resp = await addService(this.service);
            
            console.log(resp)
            if(resp.data){
                this.$router.push({name:"Service"});
            }
            else{
                console.log("添加失败........");
            }
        },
        async cancel(){
            
            this.$router.push({name:"Service"});
  
        }
    }
}
</script>

<style>

</style>